<template>
  <div class="statementTool">
    <div class="top" :class="{blueBottomLineActive:clickActive}">
      <el-row type="flex" justify="start" align="middle">
        <el-col :span="1" type="flex" align="middle">
          <a @click="clickActive=!clickActive">
            <i v-if="!clickActive" class="el-icon-arrow-right" />
            <i
              v-else
              class="el-icon-arrow-down"
              :class="{blueActive:clickActive}"
            />
          </a>
        </el-col>
        <el-col :span="6">
          <div> {{ securityListData.yearsMonth }}社保报表 <span>未归档</span></div>
          <span
            class="firstFont"
            :class="{blueActive:clickActive}"
            @click="clickActive=!clickActive"
          >社保把表</span>
        </el-col>
        <el-col :span="3" class="boderLeft">
          <div><span>企业缴纳</span></div>
          <span>{{ securityListData.enterprisePayment }}</span>
        </el-col>
        <el-col :span="3" class="boderLeft">
          <div><span>个人缴纳</span></div>
          <span>{{ securityListData.personalPayment }}</span>
        </el-col>
        <el-col :span="3" class="boderLeft">
          <div><span>合计</span></div>
          <span>{{ securityListData.total }}</span>
        </el-col>
      </el-row>
    </div>
    <div v-show="clickActive" class="bottom">
      <!-- 导出按钮 -->
      <el-row type="flex" justify="space-between" align="middle">
        <el-col>
          <el-row type="flex" justify="start" class="tagTitle">
            <div class="linehight"><el-tag color="#cfeffe" />
              <span class="spanfont">已离职</span>
            </div>
            <div class="linehight"><el-tag color="#a8f8bb" />
              <span class="spanfont">再入职</span>
            </div>
            <div class="linehight"><el-tag color="#fedbd7" />
              <span class="spanfont">公司合计</span>
            </div>
            <div class="linehight"><el-tag color="#ffe8c9" />
              <span class="spanfont">一级部门</span>
            </div>
            <div class="linehight"><el-tag color="#fdfcd5" />
              <span class="spanfont">二级部门</span>
            </div>
          </el-row></el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <el-button type="primary" size="mini" class="gogogo" @click="exportSocial">导出</el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-table
        :data="socialtableData"
        style="width: 100%"
        max-height="250"
        border
      >
        <el-table-column
          label="序号"
          type="index"
          width="50"
        />
        <el-table-column
          prop="username"
          label="姓名"
          width="150"
        />
        <el-table-column
          prop="timeOfEntry"
          label="入职时间"
          width="150"
        />
        <el-table-column
          prop="mobile"
          label="手机号"
          width="150"
        />
        <el-table-column
          prop="idNumber"
          label="身份证号码"
          width="200"
        />
        <el-table-column
          prop="theHighestDegreeOfEducation"
          label="学历"
          width="200"
        />
        <el-table-column
          prop="openingBank"
          label="开户行"
          width="200"
        />
        <el-table-column
          prop="departmentName"
          label="一级部门"
          width="200"
        />
        <el-table-column
          prop="departmentName"
          label="二级部门"
          width="200"
        />
        <el-table-column
          prop="workingCity"
          label="工作城市"
          width="200"
        />
        <el-table-column
          prop="socialSecurityComputerNumber"
          label="社保电脑号"
          width="200"
        />
        <el-table-column
          prop="providentFundAccount"
          label="公积金账号"
          width="200"
        />
        <el-table-column
          prop="leaveDate"
          label="离职时间"
          width="200"
        />
        <el-table-column
          prop="householdRegistrationType"
          label="户籍类型"
          width="200"
        />
        <el-table-column
          prop="participatingInTheCity"
          label="参保城市"
          width="150"
        />
        <el-table-column
          prop="socialSecurityMonth"
          label="社保月份"
          width="150"
        />
        <el-table-column
          prop="socialSecurityBase"
          label="社保基数"
          width="150"
        />
        <el-table-column
          prop="socialSecurity"
          label="社保合计"
          width="150"
        />
        <el-table-column
          prop="socialSecurityEnterprise"
          label="社保企业"
          width="150"
        />
        <el-table-column
          prop="socialSecurityIndividual"
          label="社保个人"
          width="150"
        />
        <el-table-column
          prop="providentFundCity"
          label="公积金城市"
          width="150"
        />
        <el-table-column
          prop="providentFundMonth"
          label="公积金月份"
          width="150"
        />
        <el-table-column
          prop="accumulationFundEnterpriseBase"
          label="公积金企业基数"
          width="150"
        />
        <el-table-column
          prop="proportionOfProvidentFundEnterprises"
          label="公积金企业比例"
          width="150"
        />
        <el-table-column
          prop="individualBaseOfProvidentFund"
          label="公积金个人基数"
          width="150"
        />
        <el-table-column
          prop="personalRatioOfProvidentFund"
          label="公积金个人比例"
          width="150"
        />
        <el-table-column
          prop="totalProvidentFund"
          label="公积金合计"
          width="150"
        />
        <el-table-column
          prop="providentFundEnterprises"
          label="公积金企业"
          width="150"
        />
        <el-table-column
          prop="providentFundIndividual"
          label="公积金个人"
          width="150"
        />
        <el-table-column
          prop="pensionEnterpriseBase"
          label="养老企业基数"
          width="150"
        />
        <el-table-column
          prop="proportionOfPensionEnterprises"
          label="养老企业比例"
          width="150"
        />
        <el-table-column
          prop="pensionEnterprise"
          label="养老企业"
          width="150"
        />
        <el-table-column
          prop="personalPensionBase"
          label="养老个人基数"
          width="150"
        />
        <el-table-column
          prop="personalPensionRatio"
          label="养老个人比例"
          width="150"
        />
        <el-table-column
          prop="oldAgeIndividual"
          label="养老个人"
          width="150"
        />
        <el-table-column
          prop="percentageOfUnemployedIndividuals"
          label="失业个人比例"
          width="150"
        />
        <el-table-column
          prop="unemployedIndividual"
          label="失业个人"
          width="150"
        />
        <el-table-column
          prop="medicalEnterpriseBase"
          label="医疗企业基数"
          width="150"
        />
        <el-table-column
          prop="proportionOfMedicalEnterprises"
          label="医疗企业比例"
          width="150"
        />
        <el-table-column
          prop="medicalEnterprise"
          label="医疗企业"
          width="150"
        />
        <el-table-column
          prop="medicalPersonalBase"
          label="医疗个人基数"
          width="150"
        />
        <el-table-column
          prop="medicalPersonalRatio"
          label="医疗个人比例"
          width="150"
        />
        <el-table-column
          prop="medicalIndividual"
          label="医疗个人"
          width="150"
        />
        <el-table-column
          prop="baseOfIndustrialInjuryEnterprises"
          label="工伤企业基数"
          width="150"
        />
        <el-table-column
          prop="proportionOfIndustrialInjuryEnterprises"
          label="工伤企业比例"
          width="150"
        />
        <el-table-column
          prop="industrialInjuryEnterprise"
          label="工伤企业"
          width="150"
        />
        <el-table-column
          prop="proportionOfFertilityEnterprises"
          label="生育企业比例"
          width="150"
        />
        <el-table-column
          prop="childbearingEnterprise"
          label="生育企业"
          width="150"
        />
        <el-table-column
          prop="baseOfSeriousIllness"
          label="大病企业基数"
          width="150"
        />
        <el-table-column
          prop="baseOfSeriousIllness"
          label="大病企业比例"
          width="150"
        />
        <el-table-column
          prop="bigDiseaseEnterprise"
          label="大病企业"
          width="150"
        />
        <el-table-column
          prop="personalBaseOfSeriousIllness"
          label="大病个人基数"
          width="150"
        />
        <el-table-column
          prop="personalProportionOfSeriousIllness"
          label="大病个人比例"
          width="150"
        />
        <el-table-column
          prop="personalBaseOfSeriousIllness"
          label="大病个人"
          width="150"
        />
        <el-table-column
          prop="providentFundNotes"
          label="公积金备注"
          width="150"
        />
        <el-table-column
          prop="socialSecurityNotes"
          label="社保备注"
          width="150"
        />

      </el-table>
    </div>
  </div>
</template>

<script>
import { getSecurityMouthList } from '@/api/social'
export default {
  props: {
    securityListData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      clickActive: false,
      yearMonth: this.securityListData.yearsMonth,
      socialtableData: []
    }
  },
  watch: {
    //   监听
    async clickActive() {
      if (this.clickActive) {
        //   如果是正确就获取列表
        const params = { yearMonth: this.yearMonth, opType: 2 }
        const res = await getSecurityMouthList(params)

        this.socialtableData = res
        // 改造入职时间
        this.socialtableData.map(data => {
          data.timeOfEntry = data.timeOfEntry.split('T')[0]
        })
      }
    }
  },
  methods: {
    // 点击导出
    async  exportSocial() {
    // 这里是按钮被点击, 可以就在这里单独引入需要的库
      const { export_json_to_excel } = await import('@/vendor/Export2Excel')

      const params = { yearMonth: this.yearMonth, opType: 2 }
      const res = await getSecurityMouthList(params)
      // console.log(res)
      const dict = {
        '公积金企业基数': 'accumulationFundEnterpriseBase',
        '归档id': 'archiveId',
        '银行卡号': 'bankCardNumber',
        '工伤企业基数': 'baseOfIndustrialInjuryEnterprises',
        '大病企业基数': 'baseOfSeriousIllness',
        '大病企业': 'bigDiseaseEnterprise',
        '生育企业': 'childbearingEnterprise',
        '生育企业基数': 'fertilityEnterpriseBase',
        '一级部门': 'firstLevelDepartment',
        '户籍类型': 'householdRegistrationType',
        'id': 'id',
        '身份证号': 'idNumber	',
        '公积金个人基数	': 'individualBaseOfProvidentFund',
        '工伤企业	': 'industrialInjuryEnterprise',
        '离职时间	': 'leaveDate',
        '医疗企业	': 'medicalEnterprise',
        '医疗企业基数	': 'medicalEnterpriseBase',
        '医疗个人	': 'medicalIndividual',
        '医疗个人基数	': 'medicalPersonalBase',
        '医疗个人比例	': 'medicalPersonalRatio',
        '手机号	': 'mobile',
        '养老个人	': 'oldAgeIndividual',
        '开户行	': 'openingBank',
        '参保城市	': 'participatingInTheCity',
        '养老企业	': 'pensionEnterprise',
        '养老企业基数	': 'pensionEnterpriseBase',
        '失业个人比例	': 'percentageOfUnemployedIndividuals',
        '大病个人基数	': 'personalBaseOfSeriousIllness',
        '养老个人基数	': 'personalPensionBase',
        '养老个人比例	': 'personalPensionRatio',
        '大病个人比例	': 'personalProportionOfSeriousIllness',
        '公积金个人比例	': 'personalRatioOfProvidentFund',
        '生育企业比例	': 'proportionOfFertilityEnterprises',
        '工伤企业比例	': 'proportionOfIndustrialInjuryEnterprises',
        '医疗企业比例	': 'proportionOfMedicalEnterprises',
        '养老企业比例	': 'proportionOfPensionEnterprises',
        '公积金企业比例	': 'proportionOfProvidentFundEnterprises',
        '企业id	': 'proportionOfSeriouslyIllEnterprises',
        '失业企业比例	': 'proportionOfUnemployedEnterprises',
        '公积金账号	': 'providentFundAccount',
        '公积金基数	': 'providentFundBase',
        '公积金城市	': 'providentFundCity',
        '公积金企业	': 'providentFundEnterprises',
        '公积金个人	': 'providentFundIndividual',
        '公积金月份	': 'providentFundMonth',
        '公积金备注	': 'providentFundNotes',
        '社保合计	': 'socialSecurity',
        '社保基数	': 'socialSecurityBase',
        '社保电脑号	': 'socialSecurityComputerNumber',
        '社保企业	': 'socialSecurityEnterprise',
        '社保个人	': 'socialSecurityIndividual',
        '社保月份	': 'socialSecurityMonth',
        '社保备注		': 'socialSecurityNotes',
        '学历	': 'theHighestDegreeOfEducation',
        '失业个人基数		': 'theNumberOfUnemployedIndividuals',
        '入职时间	': 'timeOfEntry',
        '公积金合计': 'totalProvidentFund',
        '二级部门	': 'twoLevelDepartment',
        '失业企业		': 'unemployedEnterprise',
        '失业个人		': 'unemployedIndividual',
        '失业企业基数		': 'unemploymentEnterpriseBase',
        '用户id	': 'userId',
        '姓名': 'username',
        '工作城市	': 'workingCity',
        '年月': 'yearsMonth'
      }

      // 改造数据
      const SocialData = res.map(Social => {
        return this.object2Arrayy(Social, dict)
      })

      // 导出配置
      export_json_to_excel({
        header: Object.keys(dict),
        data: SocialData
      })
    },
    // 对象转数组
    object2Arrayy(social, dict) {
      const newSocial = []
      for (const key in dict) {
        const enkey = dict[key]
        const value = social[enkey]

        newSocial.push(value)
      }

      return newSocial
    }
  }

}
</script>

<style lang="scss" scoped>
.top{
    border-bottom: 3px solid #cccccc;
    padding-bottom: 9px;
}
.blueActive{
    color:#409eff;
}
.blueBottomLineActive{
    border-bottom: 3px solid #409eff;
}
.linehight{
    display: flex;
    align-items: center;
    .spanfont{
        color:#000  !important;
        padding-left: 5px;
    }
}
::v-deep .gogogo{
  span{
    color: #fff !important;
  }
}
 ::v-deep  .el-row{
     .el-col{
        margin-top: 15px;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        div{

            width: 100%;
            text-align: center;
            font-size: 16px;
            span{
                font-size: 14px;
                color: #ccc;
            }
        }
        span{
            margin-top: 5px;
            font-size: 20px;
        }
        .firstFont{
            width: 100%;
            margin-top: 10px;
            padding-left: 25%;
            font-size: 14px;
            cursor: pointer;

        }
     }
     .boderLeft{
          border-left: 1px solid #ccc;

     }
 }
 ::v-deep .el-tag{
     height: 22px;
 }
</style>
